<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        /* 块级标签 独占一行 能随时设置宽度和高度 div p h1 h2 ul li*/
        div{
            background-color: orangered;
            width: 20px;
            height: 50px;
            /* 直接隐藏标签*/
            /*display: none;*/
            /* inline 让块级标签和行内-块级标签->行内标签 宽度高度失效*/
            /*display: inline;*/


            /* inline-block 让块级标签和行内标签->行内-块级标签 宽度高度又都能设置了*/

            display: inline-block;
        }
        /*p{*/
            /*background-color: purple;*/
        /*}*/

        /* 行内标签 多个行内标签能同时显示在一行 宽度和高度取决于内容的尺寸 span a label*/

        span{
               background-color: yellow;
            /* 让行内标签变成块级标签*/
            display: block;
            height: 90px;
            width: 400px;

        }
    /*行内-块级标签 集合2种标签的优势 多个行内块级标签可以显示在同一行 能随时设置宽度和高度 input button*/

        input{

            width: 200px;
            background-color: palevioletred;
            height: 10px;
            display: block;

        }

        /* 修改标签显示类型*/




    </style>
</head>
<body>
    <div>1111111</div>
    <div>1111111</div>
    <div>1111111</div>
    <div>1111111</div>
    <div>1111111</div>
    <span>22222222</span>
    <span>22222222</span>
    <span>22222222</span>


    <a href="#">百度</a>
    <a href="#">百度</a>
    <a href="#">百度</a>
    <a href="#">百度</a>
    <a href="#">百度</a>

    <p></p>



    <input>
    <input>
    <input>



</body>
</html>